<template>
	<div class="hello">
		<app-bar ref="AppBar" title="首页" right-text="关闭" left-text="返回" @click-left="onClickNavLeft"
			@click-right="onClickNavRight" @click-title="onClickNavTitle">
		</app-bar>

		<div class="page-view" ref="pageView">
			<h2>这里仅展示了部分常用方法，大部分uniapi都已兼容</h2>

			<van-divider>调用app层相册</van-divider>
			<van-uploader v-model="imgList" @click-upload="chooseImg" />

			<van-divider>调用app层页面跳转</van-divider>
			<!-- <v-image :src="img" width="50"></v-image> -->
			<div>
				<van-button type="primary" size="large" @click="navigateTo">navigateT1o</van-button>
				<van-button type="primary" size="large" @click="redirectTo">redirectTo</van-button>
				<van-button type="primary" size="large" @click="reLaunch">reLaunch</van-button>
				<van-button type="primary" size="large" @click="switchTab">switchTab</van-button>
				<van-button type="primary" size="large" @click="navigateBack">navigateBack</van-button>
			</div>
			<van-divider>调用app层storage</van-divider>
			<div>
				<van-button type="info" size="large" @click="setStorageSync">往storage中设置一个随机数(同步)</van-button>
				<van-button type="info" size="large" @click="getStorageSync">获取刚刚设置的随机数(同步)</van-button>
				<van-button type="info" size="large" @click="setStorage">往storage中设置一个随机数(异步)</van-button>
				<van-button type="info" size="large" @click="getStorage">获取刚刚设置的随机数(异步)</van-button>
			</div>
			<van-divider>调用app层位置</van-divider>
			<div>
				<van-button type="warning" size="large" @click="getLocation">getLocation(获取当前位置)</van-button>
				<van-button type="warning" size="large" @click="openLocation">openLocation(打开内置地图)</van-button>
				<van-button type="warning" size="large" @click="onLocationChange">onLocationChange(位置变化监听)</van-button>
				<van-button type="warning" size="large" @click="offLocationChange">offLocationChange(关闭位置变化监听)
				</van-button>
			</div>
			<van-divider>调用app层手机相关</van-divider>
			<div>
				<van-button type="danger" size="large" @click="makePhoneCall">makePhoneCall(拨打电话)</van-button>
				<van-button type="danger" size="large" @click="scanCode">scanCode(扫码)</van-button>
				<van-button type="danger" size="large" @click="setScreenBrightness">setScreenBrightness(随机设置屏幕亮度)
				</van-button>
				<van-button type="danger" size="large" @click="vibrateLong">vibrateLong(使手机发生振动)</van-button>
			</div>

			<van-divider>调用app层网络相关</van-divider>
			<div>
				<van-button type="primary" size="large" @click="getNetworkType">getNetworkType(获取当前网络状态)</van-button>
				<van-button type="primary" size="large" @click="onNetworkStatusChange">onNetworkStatusChange(监听网络状态变化)
				</van-button>
				<van-button type="primary" size="large" @click="offNetworkStatusChange">
					offNetworkStatusChange(关闭监听网络状态变化)
				</van-button>
			</div>


			<van-divider>发送请求到服务器</van-divider>
			<van-button type="primary" size="large" @click="request">request(发送请求)</van-button>

			<van-divider>vue 内部路由切换(跳转页面)</van-divider>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
			<van-button type="info" size="large" @click="routeTo">routeTo(跳转页面)</van-button>
		</div>

	</div>
</template>

<script>
	import Image from '../components/Image.vue'
	import AppBar from '../components/AppBar.vue'
	export default {
		components: {
			"v-image": Image,
			"app-bar": AppBar
		},
		data() {
			return {
				imgList: [],
				img: null,
			}
		},
		created() {
			console.log('home 页创建了');
			if (window.uni) {
				console.log(uni.getSystemInfoSync());
				uni.getSystemSetting({
					success(res) {
						console.log(res);
					}
				})
			}
			this.init();
		},
		activated() {
			console.log('home 页激活了');
		},
		methods: {
			init() {
				// 获取appbar高度，从而能正确设置局部滚动盒子的高度
				this.$nextTick(() => {
					const appBarHeight = this.$refs.AppBar.barHeight;
					this.$refs.pageView.style.height = `calc(100vh - ${appBarHeight})`;
				})
			},
			onClickNavLeft() {
				xwbridge.windowHistoryBack();
			},
			onClickNavRight() {
				xwbridge.windowClose();
			},
			onClickNavTitle() {
				alert("点击了导航栏标题")
			},
			chooseImg() {
				const _this = this;
				uni.chooseImage({
					count: 3,
					success(res) {
						res.tempFilePaths.forEach(async path => {
							const dataObj = await xwbridge.$utils.readFileAsDataURL({
								path
							});
							_this.imgList.push({
								url: dataObj.data,
								isImage: true
							});
						});
					}
				});
			},
			navigateTo() {
				uni.navigateTo({
					url: "/pages/child/child"
				});
			},
			redirectTo() {
				uni.redirectTo({
					url: "/pages/child/child"
				});
			},
			reLaunch() {
				uni.reLaunch({
					url: "/pages/child/child"
				});
			},
			switchTab() {
				uni.switchTab({
					url: "/pages/index/index",
					xwAction: 'windowHide'
				});
			},
			navigateBack() {
				uni.navigateBack({});
			},
			setStorageSync() {
				const number = Math.floor(Math.random() * 10000);
				uni.setStorageSync('demo:number', number);
				uni.showToast({
					title: '同步成功设置随机数：' + number,
					icon: 'none',
					duration: 2000
				});
			},
			getStorageSync() {
				const number = uni.getStorageSync('demo:number');
				uni.showToast({
					title: '同步成功获取随机数：' + number,
					icon: 'none',
					duration: 2000
				});
			},
			setStorage() {
				const number = Math.floor(Math.random() * 10000);
				uni.setStorage({
					key: 'demo:number',
					data: number,
					success() {
						uni.showToast({
							title: '异步成功设置随机数：' + number,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getStorage() {
				uni.getStorage({
					key: 'demo:number',
					success(res) {
						uni.showToast({
							title: '异步成功获取随机数：' + res.data,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getLocation() {
				uni.getLocation({
					success(res) {
						uni.showToast({
							title: JSON.stringify(res),
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			openLocation() {
				uni.openLocation({
					latitude: 40.603575,
					longitude: 109.992131,
					scale: 14
				});
			},
			onLocationChange() {
				this.LocationChangeCall = (res) => {
					uni.showToast({
						title: JSON.stringify(res),
						icon: 'none',
						duration: 2000
					});
				}
				uni.onLocationChange(this.LocationChangeCall);
			},
			offLocationChange() {
				uni.offLocationChange(this.LocationChangeCall);
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '15024702174'
				});
			},
			scanCode() {
				uni.scanCode({
					success(res) {
						alert(JSON.stringify(res))
					}
				});
			},
			setScreenBrightness() {
				uni.setScreenBrightness({
					value: Math.floor(Math.random() * 10) / 10
				});
			},
			vibrateLong() {
				uni.vibrateLong({});
			},
			getNetworkType() {
				uni.getNetworkType({
					success(res) {
						uni.showToast({
							title: JSON.stringify(res),
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			onNetworkStatusChange() {
				this.onNetChangeCall = (res) => {
					uni.showToast({
						title: JSON.stringify(res),
						icon: 'none',
						duration: 2000
					});
				}
				uni.onNetworkStatusChange(this.onNetChangeCall);
			},
			offNetworkStatusChange() {
				uni.offNetworkStatusChange(this.onNetChangeCall);
			},
			request() {
				this.$http.post('/city/hotCity', {})
					.then(res => {
						console.log('/city/hotCity 响应 ↓↓↓');
						console.log(res);
						uni.showToast({
							title: '请求成功,请打开控制台查看打印',
							icon: 'none',
							duration: 2000
						});
					}).catch(function(error) {
						uni.showToast({
							title: '请求失败,请打开控制台查看打印',
							icon: 'none',
							duration: 2000
						});
						console.log(error);
					})

			},
			routeTo() {
				this.$router.push({
					path: '/about'
				})
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.page-view {
		text-align: center;
		width: 100%;
		overflow: scroll;
	}
</style>
